<html>
<head>
<title>ReadyMap WebGL</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../build/readymap-debug-0.0.1.js"></script>
<script type="text/javascript" src="../js/data/country_data.js"></script>

<link href="demo.css" rel="Stylesheet" type="text/css"></link>
<link href="../css/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css"></link>
<link href="../css/readymap.css" rel="Stylesheet" type="text/css"></link>

<script type="text/javascript">

    var map;
    var layerSwitcher;
    var mapView;
    var positionEngine;

    function locationSuccess(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        
        var iconUrl = "../images/marker.png";
        
        var icon = new ReadyMap.Icon("locationIcon", Math.deg2rad(lon), Math.deg2rad(lat), 0, iconUrl, {
              width: 32,
              height: 32
            });
        positionEngine.addElement( icon );  
        
        mapView.viewer.manipulator.setViewpoint(lat, lon, 0.0, 0, -90, 5000, 3)
    }

    function locationError(msg) {
        alert(msg.toString());
    }

    ReadyMap.init(function() {
        // create a map model:
        map = new ReadyMap.Map();

        map.addImageLayer(new ReadyMap.TMSImageLayer({
            name: "Landsat",
            url: "http://readymap.org/readymap/tiles/1.0.0/22/"
        }));
        
        map.addImageLayer(new ReadyMap.TMSImageLayer({
            name: "OSM",
            url: "http://readymap.org/readymap/tiles/1.0.0/35/",
            imageType: "png"            
        }));

        // create a view tied to a page element:
        var size = ReadyMap.getWindowSize();
        var headerHeight = jQuery('#header').height();
        size.h -= headerHeight;
        mapView = new ReadyMap.MapView("3DView", size, map);

        //Add some controls
        var zoom = new ReadyMap.Controls.Zoom(mapView, "ViewContainer");
        var pan = new ReadyMap.Controls.Pan(mapView, "ViewContainer");

        // display the Lat/Long:
        mapView.addFrameEndCallback(function() {
            var viewMatrix = mapView.viewer.view.getViewMatrix();
            viewMatrix = osg.Matrix.inverse(viewMatrix);
            var eye = [];
            osg.Matrix.getTrans(viewMatrix, eye);
            var lla = map.profile.ellipsoid.ecef2lla(eye);
            lla[0] = Math.rad2deg(lla[0]);
            lla[1] = Math.rad2deg(lla[1]);
            jQuery("#Coords").html(
                "Lat: " + lla[1].toFixed(2) + "\u00B0" + "  Long = " + lla[0].toFixed(2) + "\u00B0" + "<br/>" +
                "Azim: " + Math.rad2deg(mapView.viewer.manipulator.localAzim).toFixed(1) + "\u00B0" +
                "  Pitch:" + Math.rad2deg(mapView.viewer.manipulator.localPitch).toFixed(1) + "\u00B0");
        });

        positionEngine = new ReadyMap.PositionEngine( mapView);
        
        if (navigator.geolocation) {            
            navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
        }
        else {
            alert("Sorry, your browser doesn't support geolocation.");
        }


    });
    

</script>
</head>

<body>
  <div id="header">
    <a href="http://pelicanmapping.com" border="0"><img id="logo" align="right" height="50" src="http://pelicanmapping.com/wp-content/uploads/2011/02/pelican-logo-262x93-light.png" /></a>
    <p>
        ReadyMap / WebGL :: 
        <a href="index.html">demos</a> ::
        <a href="http://godzi.org">wiki</a> :: 
        <a href="http://github.com/gwaldron/godzi-webgl">github</a> ::
        <a href="http://twitter.com/#!/pelicanmapping">twitter</a>
    </p>
  </div>
  <div id="ViewContainer">
    <canvas id="3DView"></canvas>
  </div>
  <div id="Help">
    <ul>
      <li>drag to pan</li>
      <li>wheel to zoom</li>
      <li>shift-drag to rotate</li>
      <li><a href="#" onclick="mapView.home();">reset view</a></li>
    </ul>      
    
   
  </div>
 
  <div id="Coords">
  </div>
    
</body>

</html>
